<template>
	<view class="evaluate_layout">
		<view class="evaluate_content">
			<view class="evaluate_deliveryMethod">
				<view class="evaluate_headPortrait">
					<u-avatar :src="src" @click="Personal"  shape="square"></u-avatar>
				</view>
				<view class="evaluate_deliveryTitle">
					<u--text size="16" text="商户自配送"></u--text>
				</view>
				<view class="evaluate_deliveryTimeLayout">
					<p class="evaluate_deliveryTime">商家配送 40分钟 (17:26)</p>
				</view>
			</view>
			<view class="evaluate_iconLayout">
				<view class="evaluate_iconContent">
					<view class="evaluate_dissatisfiedIcon"  v-show="dissatisfied">
						<u--image src="/static/icon/92c6d0d3fce4d608db20326bac5ef5e.jpg" width="60" height="60"  @click="lightingDissatisfie" class="evaluate_image"></u--image>
						<p class="distribution_evaluation">不满意</p>
					</view>
					<view class="evaluate_dissatisfiedIcon"  v-show="lightingDissatisfied">
						<u--image src="/static/icon/900632c95a9b02209764f0738d46c83.jpg" width="60" height="60" @click="dissatisfie" class="evaluate_image"></u--image>
						<p class="distribution_evaluation">不满意</p>
					</view>
					<view class="evaluate_dissatisfiedIcon" v-show="satisfied" >
						<u--image src="/static/icon/1f8439b618a41fce1eb17db834d2d64.jpg" width="60" height="60" @click="lightingSatisfie" class="evaluate_image"></u--image>
						<p class="distribution_evaluation">满意</p>
					</view>
					<view class="evaluate_dissatisfiedIcon"  v-show="lightingSatisfied">
						<u--image src="/static/icon/ae8f305a68b4824d6604d30d96ad490.jpg" width="60" height="60" @click="satisfie" class="evaluate_image"></u--image>
						<p class="distribution_evaluation">满意</p>
					</view>
				</view>
			</view>
			<view class="evaluate_distributionEvaluation"  v-show="satisfiedRiderEvaluation">
				  <u--input
				    placeholder="告诉我们,激励我们做的更好"
				    border="none"
				    v-model="shipperEvaluate"
					@change = "showPublishing"
				  ></u--input>
			</view>
			<view class="evaluate_distributionEvaluation" v-show="dissatisfiedRiderEvaluation">
				  <u--input
				    placeholder="非常抱歉,您的反馈会督促我们做的更好"
				     border="none"
				    v-model="shipperEvaluate"
					@change = "showPublishing"
				  ></u--input>
			</view>
		</view>
		<view class="evaluate_commodityLayout">
			<view class="evaluate_commodityLayoutContent" >
				<view class="evaluate_commodityImage">
					<u-avatar src="/static/icon/f52837eaad715c7b33fe8237dca07cf.jpg" @click="Personal"  shape="square"></u-avatar>
				</view>
				<view class="evaluate_commodityTitle">
					<u--text size="16"  text="合味谷餐吧"></u--text>
				</view>
			</view>
			<view class="evaluate_commodityEvaluate">
				<p style="float: left;">满意度：</p>
				<u-rate :count="count" v-model="satisfactionScore"  gutter="20" size="24" activeColor="#EE7A31"  @change="satisfaction" style="float: left;"></u-rate>
				<p class="evaluate_commodityEvaluateTitle">{{this.satisfactionWords}}</p>
			</view>
			<view class="evaluate_commodityEvaluate" v-if="otherScore">
				<p style="float: left;text-indent:16px;">包装：</p>
				<u-rate :count="count" v-model="packingScore"  gutter="20" size="24" activeColor="#EE7A31" style="float: left;"  @change="packing"></u-rate>
				<p class="evaluate_commodityEvaluateTitle">{{this.packingWords}}</p>
			</view>
			<view class="evaluate_commodityEvaluate"  v-if="otherScore">
				<p style="float: left;text-indent:16px;">味道：</p>
				<u-rate :count="count" v-model="tasteScore"  gutter="20" size="24" activeColor="#EE7A31"  style="float: left;" @change="taste"></u-rate>
				<p class="evaluate_commodityEvaluateTitle">{{this.tasteWords}}</p>
			</view>
			<view class="evaluate_commodityEvaluateInput" v-show="commodityEvaluation">
				<u--input
				  placeholder="满意你就夸一夸,点击这里输入评价"
				   border="none"
				  v-model="commodityEvaluate"
				  @change = "showPublishing"
				></u--input>
			</view>
			<view class="evaluate_commodityEvaluateInput" v-show="badCommodityEvaluation">
				<u--input
				  placeholder="点击这里输入问题,帮助商家改善"
				   border="none"
				  v-model="commodityEvaluate"
				  @change = "showPublishing"
				></u--input>
			</view>
		</view>
		<view class="evaluate_input" v-show="release">
			<u-button type="primary" text="提交发布" @click="submitForPublication"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认发布按钮隐藏
				release: false,
				// 其他评分（味道，包装）
				otherScore: false,
				// 点亮不满意图标
				lightingDissatisfied: false,
				// 未点亮时不满意图标
				dissatisfied: true,
				// 满意配送人评价
				satisfiedRiderEvaluation: false,
				// 不满意配送人评价
				dissatisfiedRiderEvaluation: false,
				// 满意的对商品评价
				commodityEvaluation: false,
				// 不满意的对商品评价
				badCommodityEvaluation: false,
				// 点亮满意图标
				lightingSatisfied: false,
				// 未点击时满意图标
				satisfied: true,
				// 限制评论分最高
				count: 5,
				// 满意度评分文字
				satisfactionWords:'',
				// 包装评分文字
				packingWords:'',
				// 味道评分文字
				tasteWords:'',
				// 满意度评分初始值
				satisfactionScore: 0,
				//包装评分初始值
				packingScore: 0,
				// 味道评分初始值
				tasteScore: 0,
				// 对配送人的评价
				shipperEvaluate:'',
				// 对商品的评价
				commodityEvaluate:'',
				// 商家头像
				src:'/static/icon/45948a4f970610fd9c84f6a6c375d28.jpg',
				// 用户id
				userId:'',
				// 用户名字
				userProtalName:'',
				// 配送评价状态
				deliveryEvaluateType:'',
				//用户头像id
				userProtalAvatarId:'',
			}
		},
		mounted(){
			// 头部获取用户id
			this.userId = uni.getStorageSync('id')
			// 头部获取用户名称
			this.userProtalNickName = uni.getStorageSync('nickName')
			// 头部获取用户头像id
			this.userProtalAvatarId = uni.getStorageSync('avatarId')
		},
		methods: {
			// 提交发布
			submitForPublication(){
					this.$myRequest({
						url: '/eat-service/evaluate/submitForPublication',
						method:'POST',
						data:{
							userProtalId: this.userId,
							userProtalNickName: this.userProtalNickName,
							commodityOrderId: 1,
							shopId: 8,
							shopEvaluateContent: this.commodityEvaluate,
							satisfactionScore: this.satisfactionScore,
							packingScore: this.packingScore,
							tasteScore: this.tasteScore,
							riderId: 5,
							deliveryType: 1,
							deliveryEvaluateContent: this.shipperEvaluate,
							userProtalAvatarId:this.userProtalAvatarId,
							deliveryEvaluateType: this.deliveryEvaluateType,
						},
						dataType:'json',
					}).then(res=>{
						if(res.data.flag){
							uni.showToast({
								title: '添加成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							debugger
							// 成功跳转
							uni.switchTab({
								url:'/pages/order/order'
							})
						}else{
							uni.showToast({
								title: '添加失败',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					})
			},
			// 显示发布
			showPublishing(e){
				if(e>=3 && this.lightingSatisfied == true){
					this.release = true
				} else if(e>=3 && this.lightingDissatisfied == true && this.shipperEvaluate !== ''){
					this.release = true
				}
				else if(this.commodityEvaluate !== '' && this.shipperEvaluate !== ''){
					this.release = true
				}
			},
			// 点击味道评分时
			taste(e){
				this.tasteScore = e
				if(this.tasteScore !== 0){
					if(this.tasteScore == 1 ){
						this.tasteWords = "非常差"
					} else if(this.tasteScore == 2 ){
						this.tasteWords = "差"
					} else if(this.tasteScore == 3){
						this.tasteWords = "一般"
					} else if(this.tasteScore == 4){
						this.tasteWords = "满意"
					} else if(this.tasteScore == 5){
						this.tasteWords = "超赞"
					} else(
						this.tasteWords = ''
					)
				}
			},
			// 点击包装评分时
			packing(e){
				this.packingScore = e
				if(this.packingScore !== 0){
					if(this.packingScore == 1 ){
						this.packingWords = "非常差"
					} else if(this.packingScore == 2 ){
						this.packingWords = "差"
					} else if(this.packingScore == 3){
						this.packingWords = "一般"
					} else if(this.packingScore == 4){
						this.packingWords = "满意"
					} else if(this.packingScore == 5){
						this.packingWords = "超赞"
					} else(
						this.packingWords = ''
					)
				}
			},
			// 点击满意度评分时
			satisfaction(e){
				this.satisfactionScore = e
				if(this.satisfactionScore !== 0){
					if(this.satisfactionScore == 1 ){
						this.satisfactionWords = "非常差"
					} else if(this.satisfactionScore == 2 ){
						this.satisfactionWords = "差"
					} else if(this.satisfactionScore == 3){
						this.satisfactionWords = "一般"
					} else if(this.satisfactionScore == 4){
						this.satisfactionWords = "满意"
					} else if(this.satisfactionScore == 5){
						this.satisfactionWords = "超赞"
					} else(
						this.satisfactionWords = ''
					)
				}
				if(this.satisfactionScore < 3){
					this.badCommodityEvaluation = true
					this.commodityEvaluation  = false
				} else{
					// 对商品评价
					this.commodityEvaluation  = true
					this.badCommodityEvaluation = false
				}
				// 其他评分（味道，包装）
				this.otherScore = true
				this.showPublishing(e)
				
			},
			// 关闭点亮的不满意时
			dissatisfie(){
				this.deliveryEvaluateType = ''
				// 点亮不满意图标
				this.lightingDissatisfied = false
				// 未点亮时不满意图标
				this.dissatisfied = true
				// 不满意配送人评价
				this.dissatisfiedRiderEvaluation = false
				// 满意配送人评价
				this.satisfiedRiderEvaluation = false
				// 清空评价
				this.shipperEvaluate = ''
			},
			// 点亮不满意时
			lightingDissatisfie(){
				this.deliveryEvaluateType = 2
				// 点亮不满意图标
				this.lightingDissatisfied = true
				// 未点击不满意图标
				this.dissatisfied = false
				// 点亮满意图标
				this.lightingSatisfied = false
				// 未点击时满意图标
				this.satisfied = true
				// 不满意配送人评价
				this.dissatisfiedRiderEvaluation = true
				// 满意配送人评价
				this.satisfiedRiderEvaluation = false
				// 清空评价
				this.shipperEvaluate = ''
			},
			// 关闭点亮的满意时
			satisfie(){
				this.deliveryEvaluateType = ''
				// 满意配送人评价
				this.satisfiedRiderEvaluation = false
				// 点亮满意图标
				this.lightingSatisfied = false
				// 未点击时满意图标
				this.satisfied = true
				// 不满意配送人评价
				this.dissatisfiedRiderEvaluation = false
				// 清空评价
				this.shipperEvaluate = ''
			},
			// 点亮满意时
			lightingSatisfie(){
				this.deliveryEvaluateType = 1
				// 点亮不满意图标
				this.lightingDissatisfied = false
				// 未点击不满意图标
				this.dissatisfied = true
				// 点亮满意图标
				this.lightingSatisfied = true
				// 未点击时满意图标
				this.satisfied = false
				// 满意配送人评价
				this.satisfiedRiderEvaluation = true
				// 不满意配送人评价
				this.dissatisfiedRiderEvaluation = false
				// 清空评价
				this.shipperEvaluate = ''
			},
		}
	}
</script>
<style scoped>
	.evaluate_layout{
		background-color: #F6F6F6;
		height: 850px;
	}
	.evaluate_content{
		width: 94%;
		background-color: white;
		margin: 0 auto;
	}
	.evaluate_deliveryMethod{
		width: 94%;
		height: 40px;
		margin: 0 auto;
	}
	.evaluate_headPortrait{
		 width: 35px;
		 height: 35px;
		 float: left;
		 padding-top: 10px;
	}
	.evaluate_deliveryTitle{
		 width: 80%;
		 height: 20px;
		 margin-left: 46px;
		 padding-top: 10px;
	}
	.evaluate_deliveryTimeLayout{
		 width: 80%;
		 height: 20px;
		 margin-left: 46px;
	}
	.evaluate_deliveryTime{
		font-size: 12px;
		padding-top: 2px;
		color: #C1C1C1;
	}
	.evaluate_iconLayout{
		width: 100%;
		height: 110px;
		margin-top: 20px;
	}
	.evaluate_iconContent{
		width: 50%;
		height: 110px;
		margin: 0 auto;
	}
	.evaluate_dissatisfiedIcon{
		width: 50%;
		height: 110px;
		float: left;
	}
	.distribution_evaluation{
		font-size: 12px;
		color:#CCCCCC;
		text-align: center;
		padding-top: 10px;
	}
	.evaluate_image{
		padding-top: 14px;
		padding-left: 20px;
	}
	.evaluate_distributionEvaluation{
		height: 70px;
		padding-left: 14px;
		margin-top: 30px;
	}
	.evaluate_commodityLayout{
		 width: 94%;
		 background-color: white;
		 margin: 0 auto;
		 margin-top: 70px;
	}
	.evaluate_commodityLayoutContent{
		width: 94%;
		height: 40px;
		margin: 0 auto;
	}
	.evaluate_commodityImage{
		width: 35px;
		height: 35px;
		float: left;
		padding-top: 10px;
	}
	.evaluate_commodityTitle{
		width: 80%;
		height: 20px;
		margin-left: 46px;
		padding-top: 10px;
	}
	.evaluate_commodityEvaluate{
		width:86%;
		height: 40px;
		margin: 0 auto;
		margin-top: 30px;
	}
	.evaluate_commodityEvaluateTitle{
		float: left;
		color: #EE7A31;
	}
	.evaluate_commodityEvaluateInput{
		 height: 70px;
		 margin-top: 30px;
		 padding-left: 14px; 
	}
	.evaluate_input{
		 width: 60%;
		 margin: 0 auto;
		 margin-top: 60px;
	}
</style>